import typeOfUtils from "../../../utils/type-of-utils";
import RenderUtils from "../RenderUtils";
import {DynamicForm} from "../index.vue.d";
import {FormItemConfig, RenderTypeItem} from "../ConfigType";

const checkbox: RenderTypeItem = {
  name: 'checkbox',
  group: false, // 标识是否是分组
  /**
   * 初始化自己的绑定值
   * @param vm
   * @param formItem
   */
  initFormValue(vm: DynamicForm, formItem: FormItemConfig) {
    if (this.group) {
      vm.$set(vm.formData, formItem.prop, [])
    } else {
      vm.$set(vm.formData, formItem.prop, undefined)
    }
  },
  /**
   * @param vm
   * @param formItem
   */
  initFormItem(vm: DynamicForm, formItem: FormItemConfig) {
    // 判断是不是写了三个属性
    if (formItem.props.hasOwnProperty('options')
      || formItem.props.hasOwnProperty('asyncSetOptions')
      || formItem.props.hasOwnProperty('setOptions')) {
      vm.$set(vm.formData, formItem.prop, [])
      this.group = true
    }
    if (typeOfUtils.isEmpty(formItem.props.options)) {
      vm.$set(formItem.props, 'options', [])
    }
    if (typeOfUtils.isFunction(formItem.props.asyncSetOptions)) {
      vm.$set(formItem.props, 'loading', true)
      formItem.props.asyncSetOptions().then(res => {
        vm.$set(formItem.props, 'options', res)
      }).finally(() => {
        formItem.props.loading = false
      })
    }
  },
  /**
   * 异步加载
   * @param formItem
   * @param vm
   * @param query
   */
  asyncSetOptions(formItem, vm, query) {
    if (typeOfUtils.isFunction(formItem.props.asyncSetOptions)) {
      formItem.props.loading = true
      formItem.props.asyncSetOptions(query).then(res => {
        vm.$set(formItem.props, 'options', res)
      }).finally(() => {
        formItem.props.loading = false
      })
    }
  },

  /**
   *
   * @param createElement
   * @param vm
   * @param formItem
   * @return {VNode[]}
   */
  render(createElement, vm, formItem) {
    const result = []
    let type = ''
    if (formItem.props.type) {
      type = '-' + formItem.props.type
    } else {
      type = ''
    }
    // 判断是不是写了三个属性
    if (this.group) {
      const options = RenderUtils.getItemPropsOptions(formItem)
      const props = {
        label: formItem.props?.props?.label || 'label',
        value: formItem.props?.props?.value || 'value'
      }
      const childrens = options.map((i, index) => {
        return createElement('el-checkbox' + type, {
          props: {
            ...i,
            label: i[props.value],
            value: undefined,
            disabled: RenderUtils.setOptionsDisabled(i, vm)
          },
          on: {
            change: (val) => {
              if (typeOfUtils.isFunction(formItem.events?.optionsChange)) {
                formItem.events.optionsChange(options, val, i[props.value])
              }
            }
          }
        }, i[props.label])
      })
      const config = RenderUtils.getConfig(vm, formItem, {
        directives: [
          {
            name: 'loading',
            value: formItem.props.loading
          }
        ],
        on: {
          change: (val) => {
            if (typeOfUtils.isFunction(formItem.events?.change)) {
              formItem.events.change(options, val)
            }
          }
        }
      }, this)
      const item = createElement('el-checkbox-group', config, childrens)
      result.push(item)
    } else {
      const config = RenderUtils.getConfig(vm, formItem, {
      }, this)
      const item = createElement('el-checkbox' + type, config)
      result.push(item)
    }
    return result
  }
}

export default checkbox
